<template>
  <div class='my-button' :class="{active: isActive,defaultClass: true}"  @mouseover="hoverStyle()" @mouseout="outStyle()">
    <slot/>
  </div>
</template>
<script>
export default {
  props: {
    color: {
      default: '#001fcc'
    },
    activeColor: 'blue',
    backgoundColor: {
      default: ''
    },
    width: {
      default: '100'
    },
    height: {
      default: '200'
    },
    className: {
      default: ''
    }
  },
  data () {
    return {
      activeIndex: '',
      hoverIndex: ''
    }
  },
  computed: {
    defaultClass () {
      return {
        color: this.color,
        width: this.width * 1 ? this.width + 'px' : this.width,
        height: this.height * 1 ? this.height + 'px' : this.height
      }
    }
  },
  methods: {
    hoverStyle (e) {
      this.hoverActive = true
    },
    outStyle (e) {
      this.hoverActive = false
    },
    NavEnter (index) {
      this.hoverIndex = index
    },
    NavLeave () {
      this.hoverIndex = ''
    }
  },
  created () {
    console.log('c')
    console.log(this.id)
  },
  activated () {
    console.log('a')
    console.log(this.id)
  }
}
</script>

<style lang='scss' scoped>
.my-button {
  padding: 7px 15px;
  cursor: pointer;
  transition: all 1s;
  border: 2px solid #001fcc;
  color: #001fcc;
  :hover {

  }
}
</style>

